<template>
	<view>
		<topbar title="热门推荐" background="background:#E23C63;color:#FFF;" jt_c="2"></topbar>
		<view class="s_banxin dis_f_c_c">
			<view class="search dis_f_l_c">
				<image src="../../static/icon/search.png" mode=""></image>
				<u-input v-model="search_text" height="32" placeholder="请输入关键词" @input='search'></u-input>
			</view>
		</view>
		<view class="content">
			<view class="b_list dis_f" v-for="(item,index) in lists"  @click="info(item.id)">
				<image class="tx" :src="item.image" mode=""></image>
				<view class="dis_f_co" style="width: calc(100% - 156rpx)">
					<view class="dis_f_sb_t" style="width: 100%;" >
						<view class="title">{{item.title}}</view>
						<view class="dis_f_l_c">
							<image class="shang" src="../../static/xuan_shang/shang.png" mode="aspectFill"></image>
							<view class="num">{{item.task_money}}</view>
						</view>
					</view>
					<view class="dis_f_l_c" style="margin-bottom: 12rpx;">
						<view class="h_btn dis_f_c_c" style="margin-right: 12rpx;">{{item.tag_name}}</view>
						<!-- <view class="h_btn dis_f_c_c">云闪付</view> -->
					</view>
					<view class="h_text">{{item.task_num_success}}人已赚  剩余{{item.task_num_surplus}}人</view>
				</view>
			</view>
			<view v-if="lists ==''"><u-empty style="padding-top: 80rpx;" text="该分类暂无数据" mode="list"></u-empty></view>
			<view style="padding-bottom: 120rpx;">
				<u-loadmore :status="status" v-if="lists != ''"/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_text:'',
				lists:[],
				limit:10,
				page:1,
				status: 'nomore',
				zys:0,
			};
		},
		onShow() {
			this.page = 1;
			this.lists = [];
			this.get_rm_list();
		},
		methods:{
			info(id) {
				this.$.open('/pages/xuan_shang/xs_xq?id='+id)
			},
			search() {
				this.get_rm_list();
			},
			get_rm_list () {
				this.$.ajax(1, 'post', 'task/get_rm_list', {
					limit:this.limit,
					page:this.page,
					keyword:this.search_text,
					hot:1,
				}, (res) => {
					if(res.code == 1){
						this.zys = res.pagecount
						if(res.data != ''){
							res.data.forEach((item,index)=>{
								this.lists.push(item);
							})
						}
					}
				})
			}
		},
		onReachBottom() {
			if(this.page+1 <= this.zys){
				this.status = 'loading';
				this.page = ++this.page;
				this.get_rm_list();
			}else{
				this.status = 'nomore';
				return;
			}
		}
	}
</script>

<style lang="scss">
	.s_banxin {
		position: fixed;
		top: calc(var(--status-bar-height) + 88rpx);
		width: 100%;
		padding: 0 48rpx;
		background-color: #E23C63;
		height: 88rpx;
		z-index: 999;
	
		.search {
			width: 100%;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 14rpx 0 14rpx 30rpx;
			height: 60rpx;
	
			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}
		}
	
	}
	.content{
		padding: calc(var(--status-bar-height) + 196rpx) 24rpx 24rpx 24rpx;
		width: 100%;
		position: relative;
		z-index: 99;
		.b_list{
			width: 100%;
			padding: 24rpx;
			margin-bottom: 12rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			.tx{
				width: 108rpx;
				height: 108rpx;
				margin-right: 24rpx;
				border-radius: 50%;
			}
			.title{
				font-size: 28rpx;
				line-height: 40rpx;
				margin-bottom: 14rpx;
			}
			.num{
				font-size: 34rpx;
				line-height: 48rpx;
				color: #E23C63;
			}
			.shang{
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}
			.h_btn{
				width: 122rpx;
				height: 36rpx;
				border-radius: 4rpx;
				background-color: #FDF8FE;
				color: #BBBBBB;
				font-size: 22rpx;
				line-height: 32rpx;
				
			}
			.h_text{
				color: #BBBBBB;
				line-height: 34rpx;
				font-size: 24rpx;
			}
		}
	}
</style>
